<script setup>
import { reactive, onMounted, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import * as app from "../../wailsjs/go/main/App";
import * as runtime from "../../wailsjs/runtime/runtime";

const eventUpdateProgress = "update_progress";
const eventUpdateData = "update_data";
const noticeMessage = "notice_message";

const statusWait = 0;
const statusWorking = 1;
const statusDone = 2;
const statusFail = 3;

const data = reactive({
    tableData: [],
    doneNum: 0,
});

const progress = ref(0);

const myRef = ref();

const tableHeight = ref("250px");

// 是否已启动
const started = ref(false);

// 覆盖原文件
const coverOrigin = ref(true);
watch(coverOrigin, (newValue, oldValue) => {
    app.ChangeCoverOrigin(newValue);
});

// 输出目录
const outputPath = ref("");
watch(outputPath, (newValue, oldValue) => {
    app.InputOutputPath(newValue);
});

function formatFileSize(fileSize) {
    if (fileSize < 1024) {
        return fileSize + "B";
    } else if (fileSize < 1024 * 1024) {
        var temp = fileSize / 1024;
        temp = temp.toFixed(2);
        return temp + "KB";
    } else if (fileSize < 1024 * 1024 * 1024) {
        var temp = fileSize / (1024 * 1024);
        temp = temp.toFixed(2);
        return temp + "MB";
    } else {
        var temp = fileSize / (1024 * 1024 * 1024);
        temp = temp.toFixed(2);
        return temp + "GB";
    }
}

const sizeFormatter = (row, column, cellValue, index) => {
    return formatFileSize(cellValue);
};

const statusFormatter = (row, column, cellValue, index) => {
    if (cellValue == statusWait) {
        return "待处理";
    }
    if (cellValue == statusWorking) {
        return "处理中";
    }
    if (cellValue == statusDone) {
        return "已完成";
    }
    if (cellValue == statusFail) {
        return "失败";
    }
};

function cangeOutputPath() {
    app.ChangeOutputPath().then((res) => (outputPath.value = res));
}

function chooseFiles() {
    app.ListDir().then((result) => {
        data.tableData = result;
        data.doneNum = 0;
        started.value = false;
        resizeTable();
    });
}

function start() {
    app.Start().then((res) => {
        started.value = res;
    });
}

const onNoticeMessage = () => {
    runtime.EventsOn(noticeMessage, (val) => {
        ElMessage({
            message: val.message,
            type: val.type,
        });
    });
};

const onUpdateProgress = () => {
    console.log("onUpdateProgress");
    runtime.EventsOn(eventUpdateProgress, (val) => {
        data.doneNum++;
        let n = Math.round((data.doneNum / data.tableData.length) * 100);
        progress.value = n;
        if (n == 100) {
            started = false;
        }
    });
};

const onUpdateData = () => {
    runtime.EventsOn(eventUpdateData, (val) => {
        let item = data.tableData.find((v) => v.id == val.id);
        item.status = val.status;
        item.after = val.after;
    });
};

const resizeTable = () => {
    let height = myRef.value.$el.clientHeight;
    tableHeight.value = `calc(100vh -  ${height}px)`;
};

onMounted(() => {
    onUpdateData();
    onUpdateProgress();
    onNoticeMessage();
    resizeTable();
});
</script>

<template>
    <main>
        <el-affix ref="myRef">
            <el-row class="menu">
                <el-col :sm="12">
                    <el-input v-model="outputPath" :disabled="coverOrigin" placeholder="输出目录"> </el-input>
                </el-col>
                <el-col :sm="3">
                    <el-checkbox v-model="coverOrigin" label="覆盖原文件" />
                </el-col>
                <el-col :sm="3">
                    <el-button type="primary" :disabled="coverOrigin" @click="cangeOutputPath"> 输出目录 </el-button>
                </el-col>
                <el-col :sm="3">
                    <el-button type="primary" @click="chooseFiles"> 选择文件 </el-button>
                </el-col>
                <el-col :sm="3">
                    <el-button type="primary" :disabled="started" @click="start"> 开始处理 </el-button>
                </el-col>
            </el-row>
            <el-progress :percentage="progress" class="progress" />
        </el-affix>

        <el-table :data="data.tableData" style="width: 100%" :height="tableHeight" empty-text=" ">
            <el-table-column prop="name" label="文件名" />
            <el-table-column prop="before" label="压缩前" :formatter="sizeFormatter" />
            <el-table-column prop="after" label="压缩后" :formatter="sizeFormatter" />
            <el-table-column prop="status" label="状态" width="100" :formatter="statusFormatter" />
        </el-table>
    </main>
</template>

<style scoped>
.menu {
    text-align: center;
    margin-top: 10px;
}
.progress {
    margin: 20px 0 20px 0;
}
</style>
